<template>
    <div class="van-hairline--surround">
        <div class="user-index">
            <van-row>
                <van-image
                    src="https://tse2-mm.cn.bing.net/th/id/OIP-C.8lfUjYOuiZoK3K4YPgqbygHaE8?pid=ImgDet&rs=1"
                />
            </van-row>
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field
                        v-model="username"
                        name="用户名"
                        label="用户名"
                        placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                    <van-field
                        v-model="password"
                        type="password"
                        name="密码"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                    />
                </van-cell-group>

                <van-row class="user-select" justify="center">
                    <van-col span="10">
                        <van-checkbox v-model="checked">自动登录</van-checkbox>
                    </van-col>
                    <van-col span="10">
                        <span>注册新用户</span>
                    </van-col>
                </van-row>

                <van-row class="user-button" justify="center" gutter="2">
                    <van-col span="22">
                        <van-button round block type="primary" native-type="submit" size="small">登录</van-button>
                    </van-col>
                </van-row>
            </van-form>
        </div>
    </div>
</template>

<script>

import { Row, Col, Icon, Cell, Form, Field, CellGroup, Button } from 'vant';
import { Checkbox, CheckboxGroup } from 'vant';
import { Image as VanImage } from 'vant';

export default {
    name: 'LoginForm',
    components: {
        [Row.name]: Row,
        [Col.name]: Col,
        [Icon.name]: Icon,
        [Cell.name]: Cell,
        [Form.name]: Form,
        [Field.name]: Field,
        [CellGroup.name]: CellGroup,
        [Button.name]: Button,
        [Checkbox.name]: Checkbox,
        [CheckboxGroup.name]: CheckboxGroup,
        [VanImage.name]: VanImage
    },
    data() {

    }
}

</script >

<style  scoped>
.user-select {
    margin: 25px;
}
.user-button {
    margin: 20px;
    /* padding: 70px 0 0 165px; */
}
</style>